<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
<!--
        需求1.定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
        需求2.定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

        自定义指令总结：
            一：定义语法：
                (1).局部指令：
                new Vue({                               new Vue({
                    directives:{指令名：配置对象}   或          directives{指令名：回调函数}
                })                                      })
                （2）.全局指令：
                    Vue.directive{指令名，配置对象} 或者 Vue.directive{指令名，回调函数}


-->
<!-- 准备好 一个容器-->
<div id="root">
    <h2>当前的n值是： <span v-text="n"></span></h2>
<!--    <h2>放大十倍后的n值是： <span v-big-number="n"></span></h2>-->
    <h2>放大十倍后的n值是： <span v-big="n"></span></h2>
    <button @click="n++" type="submit">点我n+1</button>
    <hr>
    <input type="text" v-fbind:value="n">
</div>

<div id="root2">
<!--    <h2></h2>-->
</div>


</body>


<script type="text/javascript">

    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。



    //全局指令定义

    // Vue.directive('fbind',{
    //     //指令与元素成功绑定时,调用bind
    //     bind(element,binding){
    //         element.value = binding.value
    //         // console.log('bind')
    //     },
    //     //指令所在元素被插入页面时
    //     inserted(element,binding){
    //         element.focus()
    //         // console.log('inserted')
    //     },
    //     //指令所在的模板被重新解析时
    //     update(element,binding){
    //         // console.log('update')
    //         element.value = binding.value
    //     }
    // })

    // Vue.directive('big-number',function (element,binding){
    //     element.innerText = binding.value*10
    // })





    //创建Vue实例
    new Vue({
        el: '#root',
        data:{
            n:1
        },
        directives:{
            //big函数何时会被调用？1.指令与元素成功绑定时。2.指令所在的模板被重新解析时
            'big-number'(element,binding){
                element.innerText = binding.value*10
            },
            big(element,binding){
                // console.log(this)   注意此处的this是window
                element.innerText = binding.value*10
            },
            fbind:{
                //指令与元素成功绑定时,调用bind
                bind(element,binding){
                    element.value = binding.value
                    // console.log('bind')
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                    // console.log('inserted')
                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    // console.log('update')
                    element.value = binding.value
                }
            }
        }
    })

    new Vue({
        el:'#root2',
        data:{
            x:1
        }
    })

</script>

</html>
